<template>
  <div class="feedBack">
      <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">意见反馈</span>
      <span class="header-wrap-right">
        <!-- <i class="iconseach iconfont icon-sousuo"></i> -->
      </span>
    </div>
    <!-- 列表 -->
    <div class="feedBck-list-box">
      <div class="feedBck-list" @click="tofeedBackDetail(list.id)" v-for="(list,index) in listData" :key="index">
        <div class="list-flex" v-if="listData.length!=0">
          <img :src="infoData.avatar" alt="">
        </div>
        <div class="list-flex">
          <span class="feedBack-title">{{list.title}}</span>
          <span class="star" v-if="list.star">
            <van-rate
              style="width: auto;margin:.1rem .1rem .1rem 0;"
              readonly
              v-model="list.star"
              allow-half
              void-icon="star"
              void-color="#6b5da6"
              color= '#ffa272'
              @change= 'change(index)'
              size= ".24rem"
            />
          </span>
          <span class="feedBack-content" style="margin: .1rem 0;">{{list.content}}</span>
          <span class="feedBack-content feedBackReply">
            <span>{{list.createtime_text}}</span>
            <!-- <span>回复</span> -->
          </span>
        </div>
      </div>
      <div class="sunmit-box" v-show="buttonShow">
        <div class="submit" @click="getDome">
          发表新的意见
        </div>
      </div>
      <!-- 新增意见 -->
      <div class="newList-box" v-if="showDome">
        <NewList @getshow="cancelPopup" :message="defaults"/>
      </div>
    </div>
    <Tips v-show="length<=0"/>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Rate } from 'vant';
import NewList from './components/newList'
import Tips from '../../components/tips'
export default {
  data(){
    return{
      length: null,
      showDome: false,
      buttonShow: true,
      infoData:[],
      listData:[],
      listReply:[],
      host:api.host
    }
  },
  created(){
    this.getinfo()
    this.getMineTrip()
    this.quarters()
  },
  methods:{
    tofeedBackDetail(id){
      this.$router.push({
        path: '/listenDetail',
        query: {
          id
        }
      })
    },
    cancelPopup(){
      this.getMineTrip()
      this.show = true
      this.showDome = false
      this.buttonShow = true
    },
    goback(){
      this.$router.go(-1)
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
    getDome(){
      this.show = false
      this.showDome = true
      this.buttonShow = false
    },
   //获取用户资料
    getinfo(){
      this.$get(api.info, {})
      .then((response) => {
        this.infoData = response.data.data
      })
      .catch((error) => {
        console.log(error)
      });
    },
  //获取绑定小区
    quarters(){
      this.$get(api.quarters,{})
      .then((response) => {
        if(response.status==200){
          this.defaults = response.data.data
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
     getMineTrip(id){
      this.$get(api.FeedbackList,{
        modular:'feedback'
      })
      .then((response)=>{
        if(response.data.code === 1){
          this.length = response.data.data.list.length
          this.listData = response.data.data.list;
          this.listReply = response.data.data.re;
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
  },
  components:{
    [Rate.name]: Rate,
    NewList,
    Tips
  }
}
</script>

<style scoped>
.feedBck-list-box{
  padding: 1.3rem .5rem 0rem;
  font-weight: bold;
}
.feedBck-list{
  width: 100%;
  margin-bottom: .5rem;
  display: flex;
}
.list-flex:nth-of-type(1){
  flex: 1.2;
}
.list-flex:nth-of-type(1) img{
  margin-top: .15rem;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
}
.list-flex:nth-of-type(2){
  flex: 6;
}
.list-flex:nth-of-type(2) span{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  color: #000;
}
.new-content{
  display: flex;
  width: 88%;
}
.new-content span{
  flex: 1;
}
.feedBack-title{
  font-size: .32rem;
  color: #000;
}
.star{
  margin: .1rem 0;
}
.sunmit-box{
  z-index: 888;
  position: fixed;
  bottom: 0rem;
  left: 0;
  width: 100%;
  height: 2rem;
  background: #fff;
}
.submit{
  margin: .5rem auto 0;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  width: 88%;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .45rem;
  text-align: center;
  font-weight: bold;
}
.newList-box{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 888;
  height: 100vh;
  background: #f7f6fb;
}
.feedBackReply{
  display: flex;
}
.feedBackReply span{
  width: auto;
  color: #57c5c6!important;
  font-weight: bold;
}
.feedBackReply span:nth-of-type(2){
  margin-left: .2rem;
  font-size: .25rem;
  font-weight: bold;
}
</style>

